<template>
  <div>
    <!--  -->
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="836px"
      :title="modelTitle"
      wrapClassName="user-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body">
        <a-row :gutter="0">
          <a-form-model
            ref="form"
            :model="form"
            :rules="formRules"
            :hideRequiredMark="modelTitle != '详情' ? false : true"
          >
            <a-col :span="12">
              <a-form-model-item label="序号" prop="managerNum">
                <a-input
                  v-model="form.managerNum"
                  placeholder="请输入序号"
                  :disabled="modelTitle != '详情' ? false : true"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="文件编号" prop="sortNum">
                <a-input
                  v-model="form.sortNum"
                  placeholder="请输入文件编号"
                  :disabled="modelTitle != '详情' ? false : true"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="文件名称" prop="fileName">
                <a-input
                  v-model="form.fileName"
                  placeholder="请输入文件名称"
                  :disabled="modelTitle != '详情' ? false : true"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="形成时间">
                <a-date-picker
                  placeholder="请选择形成时间"
                  v-model="form.travelDate"
                  format="YYYY-MM-DD HH:mm:ss"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  :disabled="modelTitle != '详情' ? false : true"
                  :show-time="true"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="来源">
                <a-input
                  v-model="form.source"
                  placeholder="请输入来源"
                  :disabled="modelTitle != '详情' ? false : true"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="关键词">
                <a-input
                  v-model="form.keyWord"
                  placeholder="请输入关键词"
                  :disabled="modelTitle != '详情' ? false : true"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="工程阶段">
                <a-select
                  v-model="form.engineeringStage"
                  placeholder="请选择工程阶段"
                  :disabled="modelTitle != '详情' ? false : true"
                >
                  <a-select-option value="前期"> 前期 </a-select-option>
                  <a-select-option value="在建"> 在建 </a-select-option>
                  <a-select-option value="缺陷责任期">
                    缺陷责任期
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="资料类别">
                <a-select
                  v-model="form.type"
                  placeholder="请选择资料类别"
                  :disabled="modelTitle != '详情' ? false : true"
                >
                  <a-select-option value="永久"> 永久 </a-select-option>
                  <a-select-option value="长期"> 长期 </a-select-option>
                  <a-select-option value="短期"> 短期 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="相关项目">
                <a-input
                  v-model="form.projects"
                  placeholder="请输入相关项目"
                  :disabled="modelTitle != '详情' ? false : true"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="上传附件">
                <bj-upload-file
                  v-model="fileList"
                  :viewMode="modelTitle != '详情' ? false : true"
                  :count="20"
                  @change="upLoadFile($event)"
                  @download="downLoadFile($event)"
                  @preview="viewFile($event)"
                  @remove="deleteFile($event)"
                  :replaceFields="{
                    fileName: 'realFileName',
                    fileSize: 'fileSize',
                    fileType: 'fileType',
                    fileUrl: 'fileUrl',
                  }"
                ></bj-upload-file>
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-row>
      </div>
      <div class="modal-footer">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button
          type="primary"
          :loading="loading"
          @click="save()"
          v-if="modelTitle != '详情'"
        >
          确定
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import bjSelect from "@/components/bj-select";
import bjUploadFile from "@/components/bj-upload-file";
import { getFilePath } from "@/api/wisdom-beam/material-app";
import {
  notificationTip,
  downLoadFileByArraybuffer,
  commonViewFile,
  downFileByUrl,
} from "@/utils";
import {
  getFileListSave,
  getFileListDetail,
  getFileListUpdate,
} from "@/api/wisdom-beam/standard-costs-app";
export default {
  components: {
    bjSelect,
    bjUploadFile,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    modelTitle: {
      type: String,
      default: "新增",
    },
    rowId: {
      type: [String, Number],
      default: "",
    },
    treeItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.form.nodeId = this.treeItem.id;
          this.form.nodeName = this.treeItem.nodeName;
          this.form.zhgdDeptCode = this.treeItem.zhgdDeptCode;
          if (this.rowId) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {
        managerNum: "",
        sortNum: "",
        fileName: "",
        travelDate: "",
        source: "",
        keyWord: "",
        engineeringStage: undefined,
        type: undefined,
        projects: "",
        zhgdDeptCode: undefined,
        nodeId: "",
        nodeName: "",
      },
      formRules: {
        managerNum: [
          {
            required: true,
            message: "请输入序号",
          },
        ],
        sortNum: [
          {
            required: true,
            message: "请输入文件编号",
          },
        ],
        fileName: [
          {
            required: true,
            message: "请输入文件名称",
          },
        ],
      },
      fileList: [],
      fileIds: [],
      loading: false,
    };
  },
  mounted() {},
  methods: {
    //详情
    getDetail() {
      getFileListDetail(this.rowId)
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.form.managerNum = result.managerNum;
          this.form.sortNum = result.sortNum;
          this.form.fileName = result.fileName;
          this.form.travelDate = result.travelDate;
          this.form.source = result.source;
          this.form.keyWord = result.keyWord;
          this.form.engineeringStage = result.engineeringStage
            ? result.engineeringStage
            : undefined;
          this.form.type = result.type ? result.type : undefined;
          this.form.projects = result.projects;
          this.form.zhgdDeptCode = result.zhgdDeptCode;
          this.form.nodeId = result.nodeId;
          this.form.nodeName = result.nodeName;
          //附件
          this.fileList = result.attachmentFiles || [];
        })
        .catch();
    },
    // 保存
    save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let { form, fileList } = this;
          let formJson = {
            managerNum: form.managerNum,
            sortNum: form.sortNum,
            fileName: form.fileName,
            travelDate: form.travelDate,
            source: form.source,
            keyWord: form.keyWord,
            engineeringStage: form.engineeringStage
              ? form.engineeringStage
              : "",
            type: form.type ? form.type : "",
            projects: form.projects,
            zhgdDeptCode: form.zhgdDeptCode,
            nodeId: form.nodeId,
            nodeName: form.nodeName,
          };
          let formdata = new FormData();
          for (let key in formJson) {
            if (formJson[key] == null) {
              formJson[key] = "";
            }
            formdata.append(key, formJson[key]);
          }
          //上传附件
          for (let i = 0; i < fileList.length; i++) {
            const file = fileList[i].file;
            if (file) {
              formdata.append("multipartFiles", file);
            }
          }
          if (this.modelTitle == "新增") {
            getFileListSave(formdata)
              .then((res) => {
                this.loading = false;
                this.closeModal();
                this.$parent.getTableData();
                notificationTip("success", "新增成功!");
              })
              .catch((_) => {
                this.loading = false;
              });
          }
          if (this.modelTitle == "编辑") {
            if (this.fileIds.length != 0) {
              let ids = this.fileIds.toString();
              formdata.append("fileIds", ids);
            }
            formdata.append("id", this.rowId);
            getFileListUpdate(formdata)
              .then((res) => {
                this.loading = false;
                this.closeModal();
                this.$parent.getTableData();
                notificationTip("success", "编辑成功!");
              })
              .catch((_) => {
                this.loading = false;
              });
          }
        }
      });
    },
    //关闭弹框
    closeModal() {
      this.$refs.form.resetFields();
      this.form = {
        managerNum: "",
        sortNum: "",
        fileName: "",
        travelDate: "",
        source: "",
        keyWord: "",
        engineeringStage: undefined,
        type: undefined,
        projects: "",
        zhgdDeptCode: undefined,
        nodeId: "",
        nodeName: "",
      };
      //重置附件
      this.fileList = [];
      this.fileIds = [];
      this.$emit("update:visible", false);
    },

    //上传附件
    upLoadFile({ file, index }) {
      this.$set(this.fileList[index], "loading", true);
      setTimeout(() => {
        this.$set(this.fileList[index], "loading", false);
      }, 500);
    },

    //下载附件
    downLoadFile(file) {
      let { realFileName, id } = file;
      getFilePath(id)
        .then((res) => {
          let fileUrl = res.data?.result || "";
          if (fileUrl)
            downFileByUrl(fileUrl + "&attname=" + realFileName, realFileName);
        })
        .catch();
    },

    //附件预览
    viewFile(file) {
      let { id } = file;
      commonViewFile("beam", id);
    },

    //文件删除
    deleteFile({ file, index }) {
      if (file.id) {
        this.fileIds.push(file.id);
      }
    },
  },
};
</script>

<style lang="less" scoped>
//弹框样式
/deep/.user-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .curve-modal-body {
    padding: 20px;
    max-height: 600px;
    .custom-scrollbar();
  }
  .modal-footer {
    padding-bottom: 20px;
    text-align: center;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .ant-form-item {
    display: flex;
    .ant-form-item-label {
      width: 100px;
      white-space: pre-wrap;
      display: flex;
      justify-content: flex-end;
      line-height: 20px;
      align-items: center;
      margin-right: 0px;
      height: 36px;
      label {
        color: #999999;
      }
    }
    .check-item-select {
      height: 86px;
      .ant-select-selection__rendered {
        height: 86px;
        .ant-select-selection__placeholder {
          margin-top: -40px !important;
        }
      }
    }
    .ant-select {
      width: 100% !important;
      min-width: unset !important;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  //上传附件
  .file-name-type {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 0;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    padding: 8px;
    padding-top: 0;
    margin-top: 5px;
    height: 135px;
    width: 100%;
    .custom-scrollbar();
    overflow-x: hidden !important;
    .file-name {
      height: 100%;
      width: 100%;
      flex: 1;
      overflow: hidden;
      display: flex;
      .file-name-text {
        flex: 1;
        width: 100%;
        line-height: 14px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .file-list {
      width: 100%;
      .flex();
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      color: #525a5d;
      height: 22px;
      padding: 3px 3px;
      border-radius: 2px;
    }
    .size-color {
      color: #999999;
    }
    .file-list:hover {
      .size-color {
        color: var(--primary-color) !important;
      }
      color: var(--primary-color) !important;
      background-color: var(--border-color-base);
    }

    .file-download-list {
      width: 100%;
      .flex();
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      color: #525a5d;
      height: 22px;
      padding: 3px 3px;
      border-radius: 2px;
    }

    .file-download-list:hover {
      cursor: pointer;
      .size-color {
        color: var(--primary-color);
      }
      color: var(--primary-color);
      .file-name-text {
        text-decoration: underline;
      }
    }

    .check-icon {
      color: #4bc964;
      margin-left: 8px;
    }
    .close-icon {
      cursor: pointer;
      margin-left: 8px;
      color: #ff3f4a;
    }
    .download-icon {
      cursor: pointer;
      color: var(--primary-color);
      margin-left: 8px;
    }
  }
}

/deep/.ant-calendar-picker {
  width: 100%;
  min-width: unset !important;
}
</style>
